<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="项目名称" prop="projectName">
                <el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="客户名称" prop="enterpriseName">
                <el-input v-model="queryParams.enterpriseName" placeholder="请输入客户名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :row-style="{ height: '30px' }" :cell-style="{ padding: '0px' }" height="450" border
            v-loading="loading" :data="salesList" @selection-change="handleSelectionChange">
            <el-table-column label="序号" type="index" :index="indexMethod" />
            <el-table-column label="项目名称" align="center" prop="projectName" :show-overflow-tooltip="true" />
            <el-table-column label="客户名称" align="center" prop="enterpriseName" :show-overflow-tooltip="true" />
            <el-table-column label="证书类别" align="center" prop="certificateType" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.certificate_type" :value="scope.row.certificateType" />
                </template>
            </el-table-column>
            <el-table-column label="证书编号" align="center" prop="certificateNo" :show-overflow-tooltip="true" />
            <el-table-column label="证书名称" align="center" prop="certificateName" :show-overflow-tooltip="true" />
            <el-table-column label="服务机构" align="center" prop="serviceInstitutionName" :show-overflow-tooltip="true" />
            <el-table-column label="发证时间" align="center" prop="issuanceTime" width="110" :show-overflow-tooltip="true">

                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.issuanceTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="有效期" align="center" prop="effectiveTime" width="110" :show-overflow-tooltip="true">

                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.effectiveTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="对接时间" align="center" prop="dockingTime" width="110">

                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.dockingTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="快递时间" align="center" prop="deliveryTime" width="110">

                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.deliveryTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="单号" align="center" prop="oddNumbers" :show-overflow-tooltip="true" />
            <el-table-column label="年度监审时间" align="center" prop="auditTime" width="110">

                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.auditTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="交付物" align="center" prop="deliverables" :show-overflow-tooltip="true" />
            <el-table-column label="附件" align="center">

                <template slot-scope="scope">
                    <el-button v-if="scope.row.url != null && scope.row.url != ''"
                        @click="handlePictureCardPreview(scope.row.uploadFile)" size="small" type="text">附件</el-button>
                    <el-button size="small" v-else type="text">无附件</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">

                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view"
                        @click="handleUpdate(scope.row, scope.$index + 1)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        <!-- 添加或修改项目售后对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="closeDig">
            <div v-if="opt != 'add'">
                <el-descriptions title="">
                    <el-descriptions-item label="序号">
                        <el-tag size="medium">{{ index }}</el-tag>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" :inline="true">
                <div v-if="addSign === 1">
                    <el-descriptions title="">
                        <el-descriptions-item label="序号">
                            <el-tag size="medium">{{ form.index }}</el-tag>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
                <el-form-item label="创建人" prop="createName">
                    <el-input v-model="form.createName" placeholder="请输入创建人" disabled="disabled"
                        style="width: 250.5px" />
                </el-form-item>
                <el-form-item label="创建时间" prop="creationTime">
                    <el-date-picker clearable v-model="form.creationTime" type="date" value-format="yyyy-MM-dd"
                        placeholder="请选择创建时间" disabled="disabled" style="width: 250.5px">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="项目名称" prop="projectName">
                    <el-input v-model="form.projectName" placeholder="请输入项目名称" style="width: 250.5px"
                        @focus="handleTextAreaFocus" disabled="disabled" />
                </el-form-item>
                <el-form-item label="客户名称" prop="enterpriseName">
                    <el-input v-model="form.enterpriseName" placeholder="请输入客户名称" style="width: 250.5px"
                        disabled="disabled" />
                </el-form-item>
                <el-form-item label="证书编号" prop="certificateNo">
                    <el-input v-model="form.certificateNo" placeholder="请输入证书编号" style="width: 250.5px"
                        disabled="disabled" />
                </el-form-item>
                <el-form-item label="证书名称" prop="certificateName">
                    <el-input v-model="form.certificateName" placeholder="请输入证书名称" style="width: 250.5px"
                        disabled="disabled" />
                </el-form-item>
                <el-form-item label="证书类别" prop="certificateType">
                    <el-select v-model="form.certificateType" placeholder="请选择证书类别" style="width: 250.5px"
                        disabled="disabled">
                        <el-option v-for="dict in dict.type.certificate_type" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="服务机构" prop="serviceInstitutionName">
                    <el-input v-model="form.serviceInstitutionName" placeholder="请输入服务机构" style="width: 250.5px"
                        disabled="disabled" />
                </el-form-item>
                <el-form-item label="发证时间" prop="issuanceTime">
                    <el-date-picker clearable v-model="form.issuanceTime" type="date" value-format="yyyy-MM-dd"
                        placeholder="请选择发证时间" style="width: 250.5px" disabled="disabled">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="有效期" prop="effectiveTime">
                    <el-date-picker clearable v-model="form.effectiveTime" type="date" value-format="yyyy-MM-dd"
                        placeholder="请选择有效期" style="width: 250.5px" disabled="disabled">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="对接时间" prop="dockingTime">
                    <el-date-picker clearable v-model="form.dockingTime" type="date" value-format="yyyy-MM-dd"
                        placeholder="请选择对接时间" style="width: 250.5px" disabled="disabled">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="快递时间" prop="deliveryTime">
                    <el-date-picker clearable v-model="form.deliveryTime" type="date" value-format="yyyy-MM-dd"
                        placeholder="请选择快递时间" style="width: 250.5px" disabled="disabled">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="年度监审时间" prop="auditTime" label-width="100px">
                    <el-date-picker clearable v-model="form.auditTime" type="date" value-format="yyyy-MM-dd"
                        placeholder="请选择年度监审时间" style="width: 232px" disabled="disabled">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="单号" prop="oddNumbers">
                    <el-input v-model="form.oddNumbers" placeholder="请输入单号" style="width: 250.5px"
                        disabled="disabled" />
                </el-form-item>
                <el-form-item label="交付物" prop="deliverables">
                    <el-checkbox-group v-model="form.checkList" disabled="disabled">
                        <el-checkbox label="证书"></el-checkbox>
                        <el-checkbox label="合同"></el-checkbox>
                        <el-checkbox label="发票"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="附件" prop="uploadFile" style="width: 100%;">
                    <file-view v-if="showUpload" :type="typeSales" :businessId="form.uploadFile"
                        :businessCode="uploadCode"></file-view>
                </el-form-item>
            </el-form>

        </el-dialog>
        <el-dialog title="选择项目" :visible.sync="openProject" width="1000px" append-to-body>
            <project-info :isTree="false" @ok="selectProject"></project-info>
        </el-dialog>
        <el-dialog title="修改主分类" :visible.sync="classOpen" width="20%" style="height:1000px">
            <treeselect v-model="classificationIds" :options="options" placeholder="请选择主分类" v-if="opd != 'details'"
                style="width: 202.5px" />
            <el-input v-else v-model="form.label" placeholder="主分类" />
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitClass">确 定</el-button>
                <el-button @click="classOpen = false">关 闭</el-button>
            </div>
        </el-dialog>
        <div v-if="convertBuiness">
            <Operate @change="closeEle" :opt="'add'" :enterpriseId="enterpriseId" :enterpriseName="enterpriseName">
            </Operate>
        </div>
        <!--    附件展示对话框-->
        <el-dialog title="查看附件" :visible.sync="openFileList" width="500px" append-to-body v-if="openFileList">
            <UploadFile :upload-id="uploadId" :business-code="uploadCode"></UploadFile>
        </el-dialog>
    </div>
</template>

<script>
import { listSales, getSales, updateClass, addSales, updateSales, getOrgName } from "@/api/project/sales";
import MainType from "../../../components/MainType/index.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listType } from "@/api/maintype/type";
import FileView from "@/components/FileView/index"
import projectInfo from "../info/index.vue"
import Operate from "../../enterprise/businessinfo/operate.vue";
import UploadFile from "../../upload/index.vue";

export default {
    name: "Sales",
    dicts: ['certificate_type'],
    components: { UploadFile, Operate, Treeselect, MainType, FileView, projectInfo },
  props: {
    id: {
      type: String,
      default: null
    },
  },
    data() {
        return {
            index: null,
            opt: "edit",
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            openFileList: false,
            uploadId: null,
            // 项目售后表格数据
            salesList: [],
            typeCode: 'sales',
            //转递给转商机新增的客户名称和id
            enterpriseId: null,
            enterpriseName: null,
            //项目名称对话框
            openProject: false,
            convertBuiness: false,
            // 弹出层标题
            title: "",
            classOpen: false,
            projectIds: [],
            // 是否显示弹出层
            open: false,
            addSign: 0,
            typeSales: 0,
            uploadCode: 'sales',
            ReadOnly: false,
            showUpload: false,
            classificationIds: '650c44e1-b575-4b62-9d54-1ba9d1e8abb7',
            //主分类
            options: null,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 15,
                projectName: null,
                enterpriseName: null,
                projectId: null,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                projectName: [{ required: true, message: '请输入项目名称', trigger: 'change' }],
                enterpriseName: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
                certificateNo: [{ required: true, message: '请输入证书编号', trigger: 'blur' }],
                certificateName: [{ required: true, message: '请输入证书名称', trigger: 'blur' }],
                certificateType: [{ required: true, message: '请选择证书类别', trigger: 'blur' }],
                issuanceTime: [
                    { required: true, message: '请选择发证时间', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            const effectiveTime = this.form.effectiveTime;
                            if (value && effectiveTime && value > effectiveTime) {
                                callback(new Error('发证时间不能大于有效期'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'change',
                    },
                ],
                effectiveTime: [{ required: true, message: '请选择有效期', trigger: 'blur' }],
                dockingTime: [{ required: true, message: '请选择对接时间', trigger: 'blur' }],
            },
        };
    },
    created() {
        this.getList();
        this.listType();
    },
    methods: {
        /** 查询项目售后列表 */
        getList() {
            this.loading = true;
            this.queryParams.projectId = this.id;
            listSales(this.queryParams).then(response => {
                this.salesList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        //序号展示
        indexMethod(index) {
            return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1;
        },
        handlePictureCardPreview(id) {
            this.uploadId = id;
            this.openFileList = true;
        },
        closeDig() {
            this.showUpload = false;
            this.typeSales = 0;
            this.open = false;
            this.ReadOnly = false;
            this.getList();
        },
        /** 修改主分类 */
        handleUpdateClass() {
            this.projectIds = this.ids;
            this.classOpen = true;
            this.listType();
        },
        //批量修改主分类
        submitClass() {
            const classVO = {
                enterIds: this.projectIds,
                classId: this.classificationIds
            }
            updateClass(classVO).then(res => {
                this.$message.success(res.msg)
                this.classOpen = false;
                this.getList();
            })
        },
        // 表单重置
        reset() {
            this.form = {
                afterSalesId: null,
                projectName: null,
                enterpriseName: null,
                certificateType: null,
                certificateNo: null,
                certificateName: null,
                serviceInstitutionName: null,
                issuanceTime: null,
                effectiveTime: null,
                dockingTime: null,
                operateId: null,
                departmentId: null,
                departmentName: null,
                organizationId: null,
                organizationName: null,
                creationTime: null,
                operateTime: null,
                createId: null,
                classificationId: null,
                uploadFile: null,
                projectId: null,
                enterpriseId: null,
                createName: null,
                belongTo: null,
                deliveryTime: null,
                oddNumbers: null,
                auditTime: null,
                deliverables: null,
                checkList: [],
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        //获取树节点数据
        listType() {
            listType({ typeCode: 'sales' }).then(res => {
                this.options = res.data;
            })
        },
        //树点击事件
        getNode(data) {
            console.log(data)
            if (data.parentId != '00000000-0000-0000-0000-000000000000') {
                this.queryParams.classificationId = data.id
            } else {
                this.queryParams.classificationId = null;
            }
            this.getList()
        },
        //获取项目对象
        selectProject(projectBySales) {
            this.form.projectId = projectBySales.projectId;
            this.form.projectName = projectBySales.projectName;
            this.form.enterpriseName = projectBySales.enterpriseName;
            this.form.enterpriseId = projectBySales.enterpriseId;
            console.log(this.form)
            this.openProject = false;
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.afterSalesId)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.form.createName = this.$store.state.user.name;
            getOrgName().then(res => {
                this.form.serviceInstitutionName = res.msg;
                this.form.creationTime = new Date();
                this.form.uploadFile = new Date().getTime();
                this.form.classificationId = '650c44e1-b575-4b62-9d54-1ba9d1e8abb7'
                this.form.addSign = 0;
                this.typeSales = 0;
                this.listType();
                this.showUpload = true;
                this.open = true;
            })
            this.title = "添加项目售后";
        },
        /** 修改按钮操作 */
        handleUpdate(row, index) {
            this.reset();
            this.index = (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index;
            const afterSalesId = row.afterSalesId || this.ids
            getSales(afterSalesId).then(response => {
                this.form = response.data;
                this.form.addSign = 1;
                this.typeSales = 2;
                this.listType();
                this.showUpload = true;
                this.open = true;
                this.title = "查看项目售后信息";
            });
        },
        //点击接收方文本域,弹出选择当前用户在企业管理中的企业信息
        handleTextAreaFocus() {
            this.openProject = true;
        },
        //转商机
        convertBusiness(row) {
            this.enterpriseName = row.enterpriseName;
            this.enterpriseId = row.enterpriseId;
            this.convertBuiness = true;
        },
        closeEle() {
            this.enterpriseId = null;
            this.enterpriseName = null;
            this.convertBuiness = false;
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.afterSalesId != null) {
                        updateSales(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addSales(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
    }
};
</script>
